<template>
  <ui-alert
    v-show="timeStep != 0"
    class="vx-alert-timer"
    :class="{ hidden: timeStep == 1 }"
    :closable="closable"
    :title="title"
    :type="type"
    center
    show-icon
    @close="close"
    effect="dark"
  ></ui-alert>
</template>
<script>
export default {
  name: 'vx-alert-timer',
  props: {
    time: {
      type: Number,
      default: 3,
    },
    type: {
      type: String,
      default: 'error',
    },
    closable: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      timeStep: 0,
      title: '',
      timerHandle: null,
    };
  },
  methods: {
    show(title) {
      this.title = title;
      this.timeStep = this.time;
      if (this.timerHandle) {
        clearInterval(this.timerHandle);
      }
      this.$nextTick(() => {
        this.timerHandle = setInterval(() => {
          if (this.timeStep == 0) {
            clearInterval(this.timerHandle);
          } else {
            this.timeStep--;
          }
        }, 1000);
      });
    },
    close() {
      this.title = '';
      this.timeStep = 0;
      if (this.timerHandle) {
        clearInterval(this.timerHandle);
      }
    },
  },
};
</script>
<style lang="scss">
.vx-alert-timer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  z-index: 99;
  &.hidden {
    animation: time-out 4s infinite;
  }
  @keyframes time-out {
    0% {
      opacity: 1;
      pointer-events: initial;
    }

    100% {
      opacity: 0;
      pointer-events: none;
    }
  }
}
</style>
